<template>
  <el-menu
    class="el-menu-vertical-demo"
    default-active="/layout/workbench"
    :active-text-color="'#409EFF'"
    :text-color="'#fff'"
    :background-color="'rgb(37,42,64)'"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-menu-item index="/layout/workbench">
      <el-icon><icon-menu /></el-icon>
      <template #title>工作台</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
